<template>
  <div>
    <List :songData="data" :flag="true" />
    <div class="loading" v-if="show === true">
      <i class="el-icon-loading"></i>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  components: {
    List: () => import('../components/List.vue'),
  },
  computed: {
    ...mapState(['cookie']),
  },
  mounted() {
    if (localStorage.getItem('cookie') === null) {
      this.$message.error('需要登录')
    } else {
      this.uid = localStorage.getItem('uid');
      this.getCookie = localStorage.getItem('cookie');
      this.getData()
    }
  },
  beforeRouteLeave(to, from, next) {
    this.show = true
    next()
  },
  watch: {
    cookie(newVal, oldVal) {
      this.uid = localStorage.getItem('uid');
      this.getCookie = newVal.cookie;
      this.getData()
    },
  },
  data() {
    return {
      uid: '',
      getCookie: '',
      data: [],
      count: 0,
      show: false,
    }
  },
  methods: {
    getData() {
      this.data = []
      this.$api.could({ cookie: this.getCookie }).then((ret) => {
        this.count = ret.count
        this.$api.could({ cookie: this.getCookie, limit: this.count }).then((res) => {
          res.data.map((item) => {
            this.data.push(item.simpleSong)
          })
        })
      })
    },
  },
}
</script>

<style>
</style>
